import React from 'react';
import 'antd/dist/antd.css'
import {
    PageHeader, Tag, Button,
    Statistic, Descriptions, Row,
    Card, Space, Tabs, Table, Radio, Divider, Badge,
    Drawer, Form, Col, Input, Select, DatePicker, Tooltip
} from 'antd';
import { PlusOutlined, MinusCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

class DeliveryDetailPage extends React.Component {

    state = { 
        visible: false,
        productIndex: null
    };

    showDrawer = (index) => {
        this.setState({
            visible: true,
            productIndex: index
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
            productIndex: null
        });
    };

    onSubmit = values => {
        console.log('Received values of form:', values);
    };


    judgeStatus = (status) => {
        switch (status) {
            case '已完成':
                return 'success';
            case '待发送':
                return 'error';
            case '待发货':
                return 'processing';
            case '待付款':
                return 'warning';
            default:
                return 'default';
        }
    };


    render() {
        const { TabPane } = Tabs;
        // const {orderInfo}=this.props;

        const columns = [
            {
                title: '产品编号',
                dataIndex: 'productid',
            },
            {
                title: '产品名称',
                dataIndex: 'productname',
            },
            {
                title: '数量',
                dataIndex: 'number',
            },
            {
                title: '状态',
                dataIndex: 'state',
                render: (state) => (<Badge status={this.judgeStatus(state)} text={state} />)
            },
            {
                title: '操作',
                dataIndex: 'action',
                render: () => (<Button type="link" onClick={this.showDrawer}>发货</Button>)
            }
        ];
        // 页面数据
        const orderInfo = {
            orderNum: '30001',
            deliveryNum: '60001',
            companyNum: '20001',
            orderDate: '2021-08-01',
            deliveryDate: '2021-08-31',
            address: 'Gonghu Road, Xihu District, Hangzhou, Zhejiang, China',
            outDate: 'processing',
            arrivalDate: 'processing',
            state: '待发货',
            totalPrice: 89061,
            details: [
                {
                    key: '1',
                    productid: '30001',
                    productname: 'iphone',
                    number: 45000,
                    state: '待发货',
                },
                {
                    key: '2',
                    productid: '30001',
                    productname: 'iphone 4s',
                    number: 96000,
                    state: '待发货',
                },
            ]
        };




        const Content = ({ children, extra }) => (
            <div className="content">
                <div className="main">{children}</div>
                <div className="extra">{extra}</div>
            </div>
        );

        return (
            <div>
                <PageHeader
                    className="site-page-header-responsive"
                    title="订单详情"
                    subTitle={orderInfo.deliveryNum}
                    footer={
                        <Tabs defaultActiveKey="1">
                            <TabPane tab="Details" key="1" >
                                <div>
                                    <Divider />
                                    <Card>
                                        <Table
                                            columns={columns}
                                            dataSource={ orderInfo.details }
                                        />
                                    </Card>
                                </div>
                            </TabPane>
                            <TabPane tab="Rule" key="2" >
                            </TabPane>
                        </Tabs>
                    }
                >
                    <Content
                        extra={
                            <div
                                style={{
                                    display: 'flex',
                                    width: 'max-content',
                                    justifyContent: 'flex-end',
                                }}
                            >
                                <Statistic
                                    title="状态"
                                    value={orderInfo.state}
                                    style={{ marginRight: 32 }} />
                                <Statistic title="货款" prefix="￥" value={orderInfo.totalPrice} />
                            </div>
                        }>
                        <Descriptions size="small" column={2}>
                            <Descriptions.Item label="公司编号">{orderInfo.companyNum}</Descriptions.Item>
                            <Descriptions.Item label="订单编号">
                                <a>{ orderInfo.orderNum }</a>
                            </Descriptions.Item>
                            <Descriptions.Item label="创建时间">{orderInfo.orderDate}</Descriptions.Item>
                            <Descriptions.Item label="计划送达">{orderInfo.deliveryDate}</Descriptions.Item>
                            <Descriptions.Item label="出库日期">{orderInfo.outDate}</Descriptions.Item>
                            <Descriptions.Item label="送达日期">{orderInfo.arrivalDate}</Descriptions.Item>
                            <Descriptions.Item label="送达地址">
                                {orderInfo.address}
                            </Descriptions.Item>
                        </Descriptions>
                    </Content>
                </PageHeader>

                {/* Drawer start here! */}
                <div className='drawer'>
                    <Drawer
                        title="发货详情"
                        width={720}
                        onClose={this.onClose}
                        visible={this.state.visible}
                        bodyStyle={{ paddingBottom: 80 }}
                        footer={
                            <div
                                style={{
                                    textAlign: 'right',
                                }}
                            >
                                <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                                    取消
                                </Button>
                                <Button onClick={this.onClose} type="primary">
                                    提交
                                </Button>
                            </div>
                        }
                    >
                        <Form className="dynamic_form_nest_item" onFinish={this.onSubmit} autoComplete="off">
                            <Form.List name="delivery">
                                {
                                    (fields, { add, remove }) => (
                                        <>
                                            {fields.map(({ key, name, fieldKey, ...restField }) => (
                                                <Space key={key} style={{ display: 'flex', width: '100%' }} direction="vertical">
                                                    <Card>
                                                        <Row gutter={36}>
                                                            <Col span={16}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[name, 'first']}
                                                                    label='工厂'
                                                                    fieldKey={[fieldKey, 'first']}
                                                                    rules={[{ required: true, message: 'Missing first name' }]}
                                                                >
                                                                    <Select>
                                                                        <Option value="jack">Jack</Option>
                                                                        <Option value="lucy">Lucy</Option>
                                                                        <Option value="Yiminghe">yiminghe</Option>
                                                                    </Select>
                                                                </Form.Item>
                                                            </Col>
                                                        </Row>
                                                        <Row gutter={36}>
                                                            <Col span={16}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[name, 'last']}
                                                                    label='数量'
                                                                    fieldKey={[fieldKey, 'last']}
                                                                    rules={[{ required: true, message: 'Missing last name' }]}
                                                                >
                                                                    <Input suffix={
                                                                        <Tooltip title="Extra information">
                                                                            <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
                                                                        </Tooltip>
                                                                    } />
                                                                </Form.Item>
                                                            </Col>
                                                        </Row>
                                                        <Row gutter={36}>
                                                            <Col span={16}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[name, 'date']}
                                                                    label='日期'
                                                                    fieldKey={[fieldKey, 'date']}
                                                                    rules={[{ required: true, message: 'Missing last name' }]}
                                                                >
                                                                    <DatePicker style={{ width: '100%' }} />
                                                                </Form.Item>
                                                            </Col>
                                                        </Row>
                                                        <Row gutter={36}>
                                                            <Col span={24}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name="description"
                                                                    label="备注"
                                                                    rules={[
                                                                        {
                                                                            required: false,
                                                                            message: 'please enter url description',
                                                                        },
                                                                    ]}
                                                                >
                                                                    <Input.TextArea rows={4} placeholder="please enter url description" />
                                                                </Form.Item>
                                                            </Col>
                                                        </Row>
                                                    </Card>
                                                    <MinusCircleOutlined onClick={() => remove(name)} />
                                                </Space>
                                            ))}
                                            <Form.Item>
                                                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                                    工厂
                                                </Button>
                                            </Form.Item>
                                        </>
                                    )
                                }
                                 
                            </Form.List>
                            <br />
                            <br />
                            <br />
                            <Button htmlType="submit" type="primary">
                                    提交
                                </Button>
                        </Form>
                    </Drawer>
                </div>
            </div>
        )
    }
}


export default DeliveryDetailPage